<!--
 * @Date: 2023-03-15 19:15:11
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-25 15:48:38
 * @FilePath: \A19\frontend\src\components\Class\WorldLoader.vue
-->
<template>
    <TheWorld v-if="loaded && start"></TheWorld>
    <div class="loader" v-else>
        <div class="view" v-if="!loaded">
            Loading... {{ Math.ceil(process) }} %
        </div>
        <div class="view" v-else @click="start = true">
            Start
        </div>
    </div>
</template>

<script lang="ts" setup>
import { usePreload } from "lingo3d-vue";
import { Ref, inject, ref, computed } from 'vue';

const start = ref(false)
const loaded = computed(()=>{
    return process.value === 100
})

const process = usePreload([
    '/models/Grassland.glb',
    // '/models/Idle.fbx',
    // '/models/Walking.fbx',

    // '/models/cinema.glb',
    '/models/ki.fbx',

    '/models/fox/char.fbx',
    '/models/fox/Idle.fbx',
    '/models/fox/Walking.fbx',

    '/models/person/char.fbx',
    '/models/person/Idle.fbx',
    '/models/person/Walking.fbx',

    '/env/env.hdr',

], '7.73MB')
</script>

<style lang="less" scoped>
.loader{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    background: black;
    .view{
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        right: 0;
        color: white;
        font-size: 30px;
        cursor: pointer;
    }
}
</style>